<template>
	<div class="write-page">
		<div class="write-icon" v-if="!isScanning">
			<img src="https://xcj006.oss-cn-shanghai.aliyuncs.com/zhonghe/hexiao.png" alt="">
		</div>
		<div class="giff-cont" v-else>
			<div class="giff-title">{{userprize.prizeName}}</div>
			<div class="giff-name">{{userprize.aaaexplain}}</div>
			<div class="giff-img">
				<img :src="userprize.prizeImage" alt="">
			</div>
		</div>
		<div class="hint">
			<div class="hint-title">扫描券码 一键核销</div>
			<div class="subheader">降低核销门槛 低成本留存优质客户</div>
			<van-button @click="startScanning" class="scan-btn" block type="info">一键核销</van-button>
		</div>
		<van-popup v-model="showIdInput" overlay-class="aaaa">
			<div class="login-cont">
				<div class="login-title">提示</div>
				<div class="login-form">
					<van-field v-model="shopid" label="店铺号" placeholder="请输入店铺号"></van-field>
					<van-cell>
						<van-button style="margin-top: .3rem;" type="info" block @click="login">登录</van-button>
					</van-cell>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import {
		QrcodeStream
	} from 'vue-qrcode-reader';
	import axios from 'axios';
	import {
		Button,
		Toast,
		Cell,
		CellGroup,
		Field,
		Popup,
		Dialog
	} from 'vant'
	export default {
		data() {
			return {
				baseUrl: 'http://81.70.216.192:19130/spacelink',
				qrcode: this.$route.query.qrcode,
				// qrcode: 'tq5aqe88cj9w',
				showIdInput: false,
				isScanning: false,
				scanResult: '',
				shopid: localStorage.getItem("sm_shopid"),
				userprize: {}
			}
		},
		created() {
			if (this.qrcode) {
				this.isScanning = false
				this.getGiff()
			} else {
				Toast('未识别到兑奖信息')
			}
		},
		methods: {
			login() {
				if(!this.shopid) {
					Toast('请输入店铺号')
					return
				}
				localStorage.setItem('sm_shopid', this.shopid)
				this.startScanning()
				
			},
			getGiff() {
				axios({
					url: this.baseUrl + '/api/h5shop/query/qrcode',
					method: 'GET',
					params: {
						qrcode: this.qrcode
					}
				}).then(res => {
					let data = res.data
					if (data.code == 200) {
						this.isScanning = true
						this.userprize = data.userprize
					} else {
						Toast(data.msg)
					}
				})
			},
			startScanning() {
				if(!this.qrcode) {
					Toast('未识别的到兑奖信息，请重新扫描')
					return false
				}
				if(!this.shopid) {
					this.showIdInput = true
					return false
				} 
				this.writeOff()
			},
			handleDecode(result) {
				this.scanResult = result;
				this.writeOff()
				this.isScanning = false; // 扫描成功后自动停止
			},
			writeOff() {
				axios({
					url: this.baseUrl + '/api/h5shop/query/writeOff',
					params: {
						qrcode: this.qrcode,
						shopid: this.shopid
					},
					method: 'GET'
				}).then(res => {
					let data = res.data
					if (data.code == 200) {
						Dialog.alert({
							message: data.msg
						}).then(() => {
							// on close
						});
					} else {
						Toast(data.msg)
					}
				})

			},
			onInit(promise) {
				promise.catch(error => {
					console.log(error)
					if (error.name === 'NotAllowedError') {
						Toast('请允许访问摄像头以进行扫码。');
					} else if (error.name === 'NotFoundError') {
						Toast('未找到二维码扫描设备。');
					} else {
						Toast('初始化二维码扫描时发生错误: ' + error.message);
					}
					this.isScanning = false;
				});
			},
			onStop() {
				this.isScanning = false;
			},
		},
		components: {
			QrcodeStream,
			'van-button': Button,
			'van-cell-group': CellGroup,
			'van-cell': Cell,
			'van-field': Field,
			'van-popup': Popup
		}
	}
</script>

<style lang="less">
	.write-page {
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0.3rem;

		.write-icon {
			width: 5rem;
			height: 5rem;
			margin-bottom: 2rem;
		
			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.hint {
			width: 100%;
		}

		.hint-title {
			margin-bottom: 0.3rem;
			font-size: .5rem;
			color: #333;
			text-align: center;
		}

		.subheader {
			font-size: .24rem;
			color: #999;
			text-align: center;
		}

		.scan-btn {
			margin-top: 0.6rem;
		}
		.giff-cont{
			width: 5rem;
			height: 5rem;
			margin-bottom: 2rem;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.giff-title{
			font-size: .32rem;
			font-weight: bold;
			margin-bottom: .2rem;
			color: #333;
		}
		.giff-name{
			font-size: .26rem;
			font-weight: bold;
			margin-bottom: .2rem;
			color: #666;
		}
		.giff-img{
			width: 3rem;
			height: 3rem;
			img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
		.van-popup {
			background-color: rgba(0, 0, 0, 0);
			padding-top: 1rem;
		}
		
		.login-cont {
			position: relative;
			padding: .2rem;
			width: 6rem;
			border-radius: 0.3rem;
			background-color: #fff;
		}
		.login-title{
			padding: .3rem 0 ;
			font-size: .3rem;
			font-weight: bold;
			text-align: center;
		}
	}
</style>